<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {DocumentCopy, Picture} from "@element-plus/icons-vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import Clipboard from "clipboard";
import {useRouter} from "vue-router";
import BackTop from "@/components/BackTop.vue";
import SdTaskView from "@/components/SdTaskView.vue";

const data = ref({
  mj: [],
  sd: [],
  dall: []
})

const loading = ref(true)
const isOver = ref(false)
// 图片类型
const imgType = ref('mj')
const listBoxHeight = window.innerHeight - 124
const colWidth = ref(220)
const showTaskDialog = ref(false)
const item = ref({})

// 计算瀑布流列宽度
const calcColWidth = () => {
  const listBoxWidth = window.innerWidth - 60 - 80
  const rows = Math.floor(listBoxWidth / colWidth.value)
  colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows)
}

calcColWidth()
window.onresize = () => {
  calcColWidth()
}

const page = ref(0)
const pageSize = ref(15)

// 获取下一页数据
const getNext = () => {
  if (isOver.value) {
    return
  }
  loading.value = true
  page.value = page.value + 1
  let url = ''
  switch (imgType.value) {
    case 'mj':
      url = '/api/mj/imgWall'
      break
    case 'sd':
      url = '/api/sd/imgWall'
      break
    case 'dall':
      url = '/api/dall/imgWall'
      break
  }
  httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`).then(res => {
    loading.value = false
    if (!res.data.items || res.data.items.length === 0) {
      isOver.value = true
      return
    }
    // 生成缩略图
    const imageList = res.data.items
    for (let i = 0; i < imageList.length; i++) {
      imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
    }
    if (data.value[imgType.value].length === 0) {
      data.value[imgType.value] = imageList
      return
    }
    if (imageList.length < pageSize.value) {
      isOver.value = true
    }
    data.value[imgType.value] = data.value[imgType.value].content(imageList)
  }).catch(e => {
    ElMessage.error('获取图片失败：' + e.message)
  })
}

getNext()

const clipboard = ref(null)
onMounted(() => {
  clipboard.value = new Clipboard('.copy-prompt-wall')
  clipboard.value.on("success", () => {
    ElMessage.success("复制成功！");
  });

  clipboard.value.on("error", () => {
    ElMessage.error("复制失败！");
  });
})

onUnmounted(() => {
  clipboard.value.destroy()
})

// 切换图片类型
const changeImgType = () => {
  console.log(imgType.value)
  document.getElementById('waterfall-box').scrollTo(0, 0);
  page.value = 0
  data.value = {
    mj: [],
    sd: [],
    dall: [],
  }
  loading.value = true
  isOver.value = false
  nextTick(() => getNext())
}

// 任务详情弹框
const showTask = (row) => {
  item.value = row
  showTaskDialog.value = true
}

const router = useRouter()
// SD 图片，画一张同款功能
const drawSameSd = (row) => {
  router.push({name: 'image-sd', params: {copyParams: JSON.stringify(row.params)}})
}

const drawSameMj = (row) => {
  router.push({name: 'image-mj', params: {prompt: row.prompt}})
}
</script>

<template>
  <div class="page-images-wall">
    <div class="inner custom-scroll">
      <div class="header">
        <h2 class="text-xl pt-4 pb-4">AI 绘图作品墙</h2>
        <div class="settings pr-14">
          <el-radio-group v-model="imgType" @change="changeImgType">
            <el-radio label="mj" size="large">MidJourney</el-radio>
            <el-radio label="sd" size="large">Stable Diffusion</el-radio>
            <el-radio label="dall" size="large">DALL-E</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="waterfall" :style="{height: listBoxHeight + 'px'}" id="waterfall-box">
        <!--
            list：绑定数据源为 data.mj（数组格式）。每个数组元素代表一个瀑布流项，需包含 img_thumb 字段。
            srcKey：指定列表项中缩略图路径的字段名。组件会从 list 的每个对象中读取 img_thumb 作为图片地址。
            gap：设置项目之间的间距为 12px（水平和垂直方向）。
            bottomGap：滚动到底部时额外加载的触底距离（负值表示提前触发加载，提升流畅性）。
            colWidth：动态绑定每列的宽度
            distanceToScroll：当滚动到距离底部 100px 时触发加载更多事件（@scrollReachBottom）
            isLoading：绑定加载状态，当 loading 为 true 时显示加载指示器
            isOver：标记数据是否全部加载完毕（true 表示无更多数据）
            @scrollReachBottom：当用户滚动到底部（满足 distanceToScroll 条件）时，调用 getNext 方法。
            -->
        <v3-waterfall
          v-if="imgType === 'mj'"
          id="waterfall"
          :list="data['mj']"
          srcKey="img_thumb"
          :gap="12"
          :bottomGap="-5"
          :colWidth="colWidth"
          :distanceToScroll="100"
          :isLoading="loading"
          :isOver="isOver"
          @scrollReachBottom="getNext"
        >
          <template #default="slotProp">
            <div class="list-item">
              <div class="image">
                <el-image
                  :src="slotProp.item['img_thumb']"
                  :zoom-rate="1.2"
                  :preview-src-list="[slotProp.item['img_url']]"
                  :preview-teleported="true"
                  :initial-index="10"
                  loading="lazy"
                >
                  <template #placeholder>
                    <div class="image-slot">正在加载图片</div>
                  </template>

                  <template #error>
                    <div class="image-slot">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="opt">
                <el-tooltip class="box-item" content="复制提示词" placement="top">
                  <el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
                    <DocumentCopy />
                  </el-icon>
                </el-tooltip>
                <el-tooltip class="box-item" content="画同款" placement="top">
                  <i class="iconfont icon-palette-pen" @click="drawSameMj(slotProp.item)"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
        </v3-waterfall>

        <v3-waterfall
            v-else-if="imgType === 'dall'"
            id="waterfall"
            :list="data['dall']"
            srcKey="img_thumb"
            :gap="12"
            :bottomGap="-5"
            :colWidth="colWidth"
            :distanceToScroll="100"
            :isLoading="loading"
            :isOver="isOver"
            @scrollReachBottom="getNext"
        >
          <template #default="slotProp">
            <div class="list-item">
              <div class="image">
                <el-image
                    :src="slotProp.item['img_thumb']"
                    :zoom-rate="1.2"
                    :preview-src-list="[slotProp.item['img_url']]"
                    :preview-teleported="true"
                    :initial-index="10"
                    loading="lazy"
                >
                  <template #placeholder>
                    <div class="image-slot">正在加载图片</div>
                  </template>

                  <template #error>
                    <div class="image-slot">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="opt">
                <el-tooltip class="box-item" content="复制提示词" placement="top">
                  <el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
                    <DocumentCopy />
                  </el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
        </v3-waterfall>

        <v3-waterfall
            v-else
            id="waterfall"
            :list="data['sd']"
            srcKey="img_thumb"
            :gap="12"
            :bottomGap="-5"
            :colWidth="colWidth"
            :distanceToScroll="100"
            :isLoading="loading"
            :isOver="isOver"
            @scrollReachBottom="getNext"
        >
          <template #default="slotProp">
            <div class="list-item">
              <div class="image">
                <el-image
                    :src="slotProp.item['img_thumb']"
                    loading="lazy"
                    @click="showTask(slotProp.item)"
                >
                  <template #placeholder>
                    <div class="image-slot">正在加载图片</div>
                  </template>

                  <template #error>
                    <div class="image-slot">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </template>
        </v3-waterfall>

        <div class="footer" v-if="isOver">
          <span>没有更多数据了</span>
          <i class="iconfont icon-face"></i>
        </div>

        <back-top :right="30" :bottom="30"/>
      </div>
    </div>
    <!-- 任务详情弹框 -->
    <sd-task-view v-model="showTaskDialog" :data="item" @drawSame="drawSameSd" @close="showTaskDialog = false"/>
  </div>
</template>

<style lang="stylus">
@import "../assets/css/images-wall.styl"
@import "../assets/css/custom-scroll.styl"
</style>